Skip to content

Incorrect sidebar padding on firefox-based browsers #11130

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
4 of 7 tasks
AngleSideAngle opened this issue Apr 26, 2025 · 1 comment · May be fixed by #11183
Open
4 of 7 tasks

Incorrect sidebar padding on firefox-based browsers #11130

AngleSideAngle opened this issue Apr 26, 2025 · 1 comment · May be fixed by #11183
Labels
bug An error in the Docusaurus core causing instability or issues with its execution status: needs more information There is not enough information to take action on the issue.

Comments

@AngleSideAngle
Copy link

AngleSideAngle commented Apr 26, 2025

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • I have read the console error message carefully (if applicable).

Description

When viewing docusaurus docs on a firefox-based browser, the there is no right padding on the sidebar buttons. Attached is a screenshot of the latest version of firefox viewing a new code sandbox from new.docusaurus.io with no modifications.

Image

Reproducible demo

No response

Steps to reproduce

  1. open any firefox
  2. navigate to https://docusaurus.io/docs or any other website that uses docusaurus

Expected behavior

The sidebar buttons should have equal padding on all sides. Attached is a screenshot from the latest version of epiphany to demonstrate. I was able to reproduce this behavior on chromium as well.

Image

Actual behavior

The sidebar buttons do not have proper padding on the right side. Attached is a screenshot from the latest version of firefox. I was able to reproduce this behavior on librewolf and zen.

Image

Your environment

  • Firefox 137, Librewolf 137
  • NixOS 24.11 latest commit
  • Full viewport size

Self-service

  • I'd be willing to fix this bug myself.
@AngleSideAngle AngleSideAngle added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Apr 26, 2025
@Josh-Cena
Copy link
Collaborator

Josh-Cena commented May 29, 2025

Are you sure about the Chromium behavior? Here's what I see on Chrome (which is consistent in Firefox and Safari too):

Image

That padding is there to prevent layout shift when the scroll bar appears. If the browser supports scrollbar-gutter, then we use the native stable scrollbar gutter instead. If the appearance of a scrollbar does not cause layout shift anyway (such as on macOS, where the scrollbar is floating), then we do not add spacing at all.

Do Firefox and Epiphany render scrollbars differently? What does it look like when you expand a few categories such that a scrollbar appears?

@Josh-Cena Josh-Cena added status: needs more information There is not enough information to take action on the issue. and removed status: needs triage This issue has not been triaged by maintainers labels May 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution status: needs more information There is not enough information to take action on the issue.
Projects
None yet
2 participants